<template>
    <view>
        <view :class="['fatalism', display ? 'fatalism-none' : '']" @click="onPopup">
            {{ title }}
            <image class="fatalism-dropdown" src="/static/achievement-reports-form/dropdown.png" />
        </view>
        <uni-popup ref="thirdPopup" type="bottom">
            <div class="select-box">
                <div class="title">
                    选择时间
                </div>
                <!-- select-i-active -->
                <div :class="['select-i']" v-for="(item, index) in list" :key="index" @click="onSelectDate(index)">
                    <view :class="[index == defaultIndex ? 'select-i-active' : '']">
                        {{ item }}
                    </view>
                    <uni-icons v-if="index === defaultIndex" type="checkmarkempty" size="17" color="#3E5FF5"></uni-icons>
                </div>
                <picker v-if="!noCustom" @change="onChangeTime" mode="date" fields="day" class="month-select">
                    <div class="select-i">
                        <text :class="[defaultIndex === 1000 ? 'select-i-active' : '']">自定义</text>
                        <!-- <view class="triangle" /> -->

                        <!--                         <uni-datetime-picker @change="onChangeTime" type="daterange" ><text :class="[defaultIndex === 1000 ? 'select-i-active' : '']">{{ callbackTime }}</text></uni-datetime-picker>-->
                        <view>
                            <!-- {color:(index==0?conFontColor:'#000')} -->
                            <uni-icons type="forward" size="17"
                                :color="defaultIndex === 1000 ? '#3E5FF5' : '#565868'"></uni-icons>
                        </view>
                    </div>
                    <div class="time-box row" v-if="defaultIndex == 1000">
                        <text :class="[defaultIndex === 1000 ? 'select-i-active' : '']">{{ callbackTime }}</text>
                        <text :style="{ color: (defaultIndex == 1000 ? '#3E5FF5' : '#565868') }" @click.stop="onReset">重新选择</text>
                    </div>
                </picker>
            </div>
            <div class="btn-box">
                <div class="btn-cancel align-flex" @click="onCancel">
                    取消
                </div>
                <div>|</div>
                <div class="btn-define align-flex" @click="onDetermine">
                    确定
                </div>
            </div>
        </uni-popup>
    </view>
</template>
<script lang="ts" setup>
import { ref, defineEmits, onMounted } from 'vue'
import dayjs from 'dayjs';
const props = defineProps(['default', 'list', 'noCustom', 'display'])
const emits = defineEmits(['submit', 'cancel'])
const title = ref('')
const thirdPopup = ref()
const callbackTime = ref('自定义')
const startTime = ref('')
const endTime = ref('')
const defaultIndex = ref()
const onPopup = () => {
    thirdPopup.value.open('top')
}
const onDetermine = () => {
    if ((!startTime.value || !endTime.value) && defaultIndex.value === 1000) {
        uni.showToast({
            title: '请选择开始和结束时间',
            icon: 'none'
        })
        return
    }
    thirdPopup.value.close()
    emits('cancel', { index: defaultIndex.value, time: callbackTime.value })
}
const onCancel = () => {
    defaultIndex.value = props.default
    title.value = props.list[defaultIndex.value] || '自定义'
    startTime.value = ''
    endTime.value = ''
    thirdPopup.value.close()
    console.log('关闭')
}
const onReset = () => {
    startTime.value = ''
    endTime.value = ''
    callbackTime.value = ''
}
const onSelectDate = (index: number) => {
    let nowyear = new Date().getFullYear()
    let nowmonth = new Date().getMonth() + 1
    let nowday = new Date().getDate()
    let nowDayOfWeek = new Date().getDay()
    let startTime = null
    let endTime = null
    if (props.list[index] === '昨天') {
        console.log('昨天')
        startTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
        endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
    } else if (props.list[index] === '今天') {
        console.log('今天')
        startTime = dayjs().format('YYYY-MM-DD')
        endTime = dayjs().format('YYYY-MM-DD')
    } else if (props.list[index] === '本周') {
        console.log('本周')
        startTime = formatDate(new Date(nowyear, nowmonth - 1, nowday - nowDayOfWeek))
        endTime = formatDate(new Date(nowyear, nowmonth - 1, nowday + (6 - nowDayOfWeek)))
    } else if (props.list[index] === '本月') {
        console.log('本月')
        startTime = formatDate(new Date(nowyear, nowmonth - 1, 1))
        endTime = formatDate(new Date(nowyear, nowmonth, 0))
    } else if (props.list[index] === '上月') {
        console.log('上月')
        startTime = formatDate(new Date(nowyear, nowmonth - 2, 1))
        endTime = formatDate(new Date(nowyear, nowmonth - 1, 0))
    } else if (props.list[index] === '全部') {
        console.log('全部')
        startTime = ''
        endTime = ''
    }
    console.log(startTime, '1111111111111111111')
    console.log(endTime, '222222222222222222222')
    defaultIndex.value = index
    callbackTime.value = '自定义'
    title.value = props.list[defaultIndex.value]
    thirdPopup.value.close()
    emits('cancel', { index: defaultIndex.value, time: callbackTime.value, startTime: startTime, endTime: endTime })
}

const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
const onChangeTime = (event: { detail: { value: string } }) => {
    console.log(event, 'time')
    defaultIndex.value = 1000
    if (!startTime.value) {
        startTime.value = event.detail.value
        callbackTime.value = startTime.value + ' 至 ' + (endTime.value || '—')
        return
    }
    if (startTime.value) {
        endTime.value = event.detail.value
    }
    callbackTime.value = startTime.value + ' 至 ' + endTime.value
    title.value = '自定义'
    // thirdPopup.value.close()
    // emits('cancel', { index: defaultIndex.value, time: callbackTime.value })
}
onMounted(() => {
    defaultIndex.value = props.default
    title.value = props.list[defaultIndex.value]
})
</script>

<style lang="scss" scoped>
.select-box {
    padding: 30rpx;
    background-color: #ffffff;

    .title {
        padding: 25rpx 29rpx;
        color: #202536;
        font-size: $font-medium;
    }

    .select-i {
        padding: 25rpx 29rpx;
        display: flex;
        align-content: center;
        justify-content: space-between;
        color: #565868;
        font-size: $font-normal;
    }

    .tips-img {
        width: 36rpx;
        height: 36rpx;
    }

    .select-i-active {
        color: #3E5FF5;
    }

    .background-color {
        color: #3E5FF5;
    }
}

.btn-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-top: 1rpx solid #DEE0E3;
    background-color: #ffffff;
    border-radius: 0 0 20rpx 20rpx;

    .btn-cancel {
        font-size: 32rpx;
        color: #202536;
        padding: 35rpx 0;
    }

    .btn-define {
        font-size: 32rpx;
        color: #3E5FF5;
        padding: 35rpx 0;
    }
}

.time-box {
    background-color: #EBEFFE;
    padding: 30rpx;
    font-weight: normal;
    font-size: 28rpx;
    border-radius: 20rpx;
}

.title {
    // color: #565868;
    // font-size: 28rpx;
}

.fatalism-none {
    background: none;
    border: 0px solid black;
    padding: 0;
}</style>
